<template>
  <div class="container">
    <div class="container1">
        <p>输入搜索</p>
        <el-input
            placeholder="请输入用户昵称或手机号...."
            v-model="keyword"
            clearable>
            </el-input>
        
    </div>
    <div class="container2">
        <p>下单时间</p>
        <el-date-picker
            type="date"
            placeholder="选择日期">
    </el-date-picker>
    <p class="cont">----</p>
    <el-date-picker
            type="date"
            placeholder="选择日期">
    </el-date-picker>
    </div>
    <div class="container3">
        <el-button type="primary" @click="searchHandler">查询</el-button>
        <el-button @click="clickHandler" >重置</el-button>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            keyword:'',
        }
    },
    methods: {
        searchHandler(){
            this.$emit('parentsearch', this.keyword);
        },
        clickHandler(){
            this.$emit('parentclick',this.keyword='')
        }
    },

}
</script>

<style lang="less" scoped>
.container{
    background-color: white;
    padding: 0px 30px;
    // display: flex;
    display: flex;
    .container1{
        display: flex;
        margin-right: 30px;
        p{
            width: 100px;
            margin: 20px 0px;
            font-weight: bolder;
        }
        /deep/.el-input__inner{
            width: 180px;
            margin: 16px 0px;
            font-size: 10px;
        }
    }
    .container2{
        display:flex;
        width: 400px;
        height: 60px;
        p{
            width: 140px;
            margin: 20px 0px;
            font-weight: bolder;
        }
        .cont{
            margin-left: 20px;
        }
        /deep/.el-input__inner{
            width: 90px;
            margin: 16px 0px;
        }
    }
    .container3{
        width: 400px;
        height: 60px;
        // background-color: yellow;
        .el-button{
            width: 100px;
            margin: 15px 5px;
            font-weight: bolder;
        }
    }
}
</style>